<!--
 * @Date: 2023-01-08 13:47:28
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-04-09 21:32:21
 * @FilePath: \A19\frontend\src\App.vue
-->
<template>
  <div class="App">
    <router-view></router-view>

    <!-- <the-world></the-world> -->
  </div>
</template>

<script lang="ts" setup>
import { onMounted, watch, nextTick } from 'vue';
import { useClientStore } from "./pinia/stores/client";
import { setLogLevel } from "tsrpc-proto";
import { ServiceType } from "@/shared/protocols/serviceProto";
import { HttpClient, WsClient } from "tsrpc-browser";
import { storeToRefs } from "pinia";
import router from "./route";
import { useRoute } from "vue-router";

const route = useRoute();

const clientStore = useClientStore();
const { currentUser } = storeToRefs(clientStore);
let client = clientStore.client as HttpClient<ServiceType>;

watch(route,async n =>{
  // console.log(n.name);
  // if(['regist','resetPassword'].find(s => s===n.name)) return
  // const ret = await client.callApi("Login/TestToken", {});
  // console.log(ret);
  // if (ret.isSucc) {
  //   clientStore.$patch({
  //     currentUser: ret.res.user as {
  //       _id: string;
  //       role: "teacher" | "student";
  //       school: string;
  //       name: string;
  //       portrait: string;
  //       email: string;
  //       number: string;
  //       gender: number;
  //     },
  //   });
  //   if(n.name === 'login'){
  //     router.replace({
  //       name:'course'
  //     })
  //   }
  // } else {
  //   router.replace({
  //     name: "login",
  //   });
  // }
})

onMounted(async () => {
  const ret = await client.callApi("Login/TestToken", {});
  if (ret.isSucc) {
    clientStore.$patch({
      currentUser: ret.res.user as {
        _id: string;
        role: "teacher" | "student";
        school: string;
        name: string;
        portrait: string;
        email: string;
        number: string;
        gender: number;
      },
    });
    // nextTick(() =>{
    //   console.log(route.name);
      
    // })
    // router.replace({
    //   name: "course",
    // });
  } else {
    ElMessage.error('需要登录')
    router.replace({
      name: "login",
    });
  }

  // const ret2 = await client.callApi('Search/SearchSchools',{
  //   name:'里'
  // })
  // console.log(ret2.res?.schools);

  // const { res }  = await client.callApi('Get/GetSchools',{})
  // res?.schools.forEach(school =>{
  //   console.log(school);
  // })

  // const { res } = await client.callApi('Search/SearchCourses', {
  //   name: '计算机'
  // })
  // console.log(res?.courses);

  // const ret1 = await client.callApi('Select/SelectCourse', {
  //   courseId: '63c0c09ae58ff204b7dcceaa'
  // })
  // if (ret1.isSucc) {
  //   ElMessage.warning('选课成功')
  // }

  // const ret1 = await client.callApi('Get/GetSelectedCourses',{})
  // if(ret1){
  //   console.log(ret1.res?.courses);
  // }
});
</script>

<style lang="less">
html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
* {
  box-sizing: border-box;
  @import url("@/less/scroller.less");
}

.App {
  // > h1 {
  //   text-align: center;
  //   margin-top: 20px;
  // }
  width: 100vw;
  height: 100vh;
  position: relative;

  // > div {
  //   display: flex;
  //   justify-content: center;
  // }
}
.item {
  word-wrap: break-word;
}

.container {
  background-color: #f2f2f2;
  padding: 80px 0;
  padding-top: 0;
  padding-bottom: 10px;
  // height: 100%;
  width: 100%;
  overflow: auto;
  .title {
    height: 60px;
    width: 100%;
    background-color: white;
    position: sticky;
    top: 0;
    z-index: 10;
    line-height: 60px;
    font-size: 20px;
    font-weight: bold;
    padding: 0 30px;
    .self {
      height: 100%;
      display: flex;
      align-items: center;
      float: right;
      .miniAvatar {
        height: 50px;
        width: 50px;
        border-radius: 50%;
      }
      .el-dropdown-link {
        margin-left: 20px;
        cursor: pointer;
      }
      .el-dropdown {
      }
    }
  }
  .head {
    height: 170px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .block {
      height: 110px;
      width: 145px;
      background-color: white;
      margin: 0 12px;
      border-radius: 20px;
      box-shadow: 1px 1px 1px #0000000a;
      position: relative;
      padding: 0 20px;
      .count {
        height: 70px;
        font-size: 40px;
        padding-top: 25px;
        line-height: 40px;
        font-weight: bold;
      }
      .param {
        height: 40px;
        line-height: 30px;
        font-size: 13px;
        color: #a2a2a2;
      }
    }
  }
  .line {
    position: relative;
    width: 100%;
    min-width: 992px;
    background-color: white;
    padding: 0px 20px;
    padding-top: 30px;
    // height: 500px;
    display: flex;
    // margin-bottom: 30px;
    // justify-content: space-between;
    #leftNavi {
      width: 15%;
      margin-right: 3%;
      margin-left: 1%;
    }
    #socket {
      width: 80%;
    }
    .header {
      position: absolute;
      top: 20px;
      font-size: 16px;
      color: #a2a2a2;
    }
    & > div {
      height: 100%;
    }
    .line-chart {
      width: 55%;
    }
    .bar-chart {
      width: 45%;
    }
  }
}
.ver {
  border-bottom: 0.0625rem solid rgb(226, 232, 240);
  border-top: 0.0625rem solid rgb(226, 232, 240);
}
.ans {
  overflow: hidden;
}

.list-container {
  // position: relative;
  // padding-top: 60px;
  height: calc(100% + 60px);
  .head {
    position: sticky;
    // position: absolute;
    top: 0;
    height: 60px;
    display: block;
    background-color: #fafdff;
    width: 100%;
    z-index: 10;
    line-height: 60px;
    padding: 0 20px;
    // padding-right: 50px;
    font-size: 20px;
    font-weight: bold;
    color: #909292b5;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
